import Taro from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View, Text, Button } from '@tarojs/components'

import CTopbar from '@/components/CTopBar/index'
import CList from '@/components/CList'
import './index.scss'
import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度
import { get_my_customer_api } from './service'

/**
 * 客服列表界面
 */

class MyCustomer extends PureComponent<any, any> {
  constructor(props) {
    super(props)
    this.state = {
      customer_list: [],
    }
  }

  //WARNING! To be deprecated in React v17. Use componentDidMount instead.
  componentWillMount() {
    this.get_customer()
  }
  get_customer() {
    get_my_customer_api().then(({ result, data }) => {
      console.log(data)
      this.setState({
        customer_list: data,
      })
    })
  }

  bindgetphonenumber(e) {
    console.log(e)
  }

  render() {
    const { customer_list } = this.state
    return (
      <View style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <CTopbar title='客服列表' showBack></CTopbar>
        <View className='content'>
          {customer_list !== [] && customer_list.length > 0
            ? customer_list.map((c, i) => {
                return (
                  <View className='wrapper' key={i}>
                    <Button openType='contact'>
                      <CList title={c.name} note={`电话号码：${c.phone}`} imgSrc={c.nameImg}></CList>
                    </Button>
                  </View>
                )
              })
            : ''}
        </View>
        {/* <View>
          下面是测试开放能力
          <Button openType='feedback'>意见反馈</Button>
          <Button openType='contact'>微信客服</Button>
          <Button openType='share'>分享</Button>
          <Button openType='openSetting'>打开授权设置页面</Button>
          <Button openType='getPhoneNumber' onGetPhoneNumber={this.bindgetphonenumber.bind(this)}>
            获取用户手机号
          </Button>
        </View> */}
        <View className='footer'>
          <Text>客服在线时间：09:00-21:00</Text>
        </View>
      </View>
    )
  }
}

export default MyCustomer
